<template>
  <div id="addpaths">
    <div class="top">
      <span @click="goadd" class="iconfont"> &#xe6bc; </span>
      <span>地址管理</span>
    </div>
    <div class="bottom">
      <p>
        <em>收货人</em>
        <input type="text" name="" id="" v-model="form.username" />
      </p>
      <p>
        <em>手机号码</em>
        <input type="text" name="" id="" v-model="form.userphone" />
      </p>
      <p>
        <em>所在地址</em>
        <van-cell is-link @click="showPopup">{{form.location}}</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-area title="标题" :area-list="areaList" 
            @cancel="showPopup" @confirm="onAddrConfirm"/>
        </van-popup>
      </p>
      <p>
        <em>详细地址</em>
        <textarea
          name=""
          id=""
          cols="24"
          rows="3"
          v-model="form.useraddress"
        ></textarea>
      </p>
    </div>
    <div class="footer">
      <p>
        <i>标签</i>
        <input
          type="radio"
          name=""
          id=""
          value="家"
          v-model="form.label"
          class="radioss"
        />家
        <input
          type="radio"
          name=""
          id=""
          value="公司"
          v-model="form.label"
        />公司
        <input
          type="radio"
          name=""
          id=""
          value="学校"
          v-model="form.label"
        />学校
      </p>
      <p>
        <span>设置默认地址<br />提醒：每次下单都会选用默认的地址</span>
        <van-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
        />
      </p>
      <p>
        <button @click="submit">保存并使用</button>
        <button @click="cancel">重置</button>
      </p>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { addressadd,addresslist} from "../utils/api";
// import {mapActions,mapGetters} from 'vuex'
export default {
  data() {
    return {
      show: false,
      areaList,
      checked: true,
      userinfo: {},
      form: {
        uid: "",
        username: "",
        userphone: "",
        location: "",
        useraddress: "",
        status: 1,
        label: "家",
      },
    };
  },
  methods: {
    submit() {
      this.form.uid = this.userinfo.uid;
      addressadd(this.form).then((res) => {
        if (res.data.code == 200) {
          alert(res.data.msg);
          this.goadd()
        } else {
          alert(res.data.msg);
        }
      });
    },
    goadd() {
      this.cancel(),
      this.$router.push("/addpath");
    },
    cancel() {
      this.form = {
        uid: "",
        username: "",
        userphone: "",
        location: "",
        useraddress: "",
        status: 1,
        label: "家",
      };
    },
    showPopup() {
      this.show = !this.show;
    },
    onAddrConfirm (e) { // 点击确认，获取所选的省市区数据
      // 确定选择,返回的必定是三元素数组
      console.log('this.onAddrConfirm=>e', e)
      this.form.location = e[0].name+e[1].name+e[2].name
      this.show = !this.show
    },
  },
  mounted() {
    this.userinfo = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : {};
      if(this.$route.query.id){
        let num=JSON.parse(this.$route.query.id)
        addresslist({id:num,uid:this.userinfo.uid}).then(res=>{
           this.form=res.data.list[0]
        })
      }
  },
};
</script>

<style  scoped>
#addpaths {
  overflow: hidden;
  width: 96%;
  margin: 0.3rem auto;
  height: 100%;
  background-color: #cecece;
}
#addpaths .top {
  height: 1.2rem;
  width: 100%;
  background-color: #ff7560;
  display: flex;
  justify-content: space-between;
}
#addpaths .top span {
  color: #fff;
  font-size: 0.36rem;
  display: block;
  line-height: 1.2rem;
}
#addpaths .top span:nth-child(1) {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  line-height: 1rem;
}
#addpaths .top span:nth-child(2) {
  margin-right: 2.4rem;
}
#addpaths .bottom {
  background-color: #fff;
}
#addpaths .bottom p {
  width: 94%;
  margin: auto;
  line-height: 1rem;
  font-size: 0.34rem;
  border-bottom: 1px solid #cecece;
}
#addpaths .bottom p:nth-child(3){
    display: flex;
}
#addpaths .bottom p:nth-child(3) .van-cell{
    width: 70%;
}
/* #addpaths .bottom p:nth-child(3) .van-cell .van-cell__right-icon{
    margin-left: 100%;
} */
#addpaths .bottom p:nth-child(4) {
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  overflow: hidden;
  display: flex;
}
#addpaths .bottom p em {
  width: 25%;
  display: inline-block;
}
#addpaths .bottom p:nth-child(4) em {
  margin-top: 1rem;
}
#addpaths .bottom p:nth-child(4) textarea {
  display: block;
  resize: none;
}

#addpaths .bottom p input {
  height: 0.6rem;
  border: none;
}
#addpaths .footer {
  background-color: #fff;
  margin-top: 0.2rem;
}
#addpaths .footer p:nth-child(1) {
  font-size: 0.3rem;
  line-height: 0.8rem;
}
#addpaths .footer p:nth-child(1) i {
  margin-left: 0.3rem;
}
#addpaths .footer p:nth-child(1) input {
  margin-left: 0.2rem;
}
#addpaths .footer p:nth-child(1) .radioss {
  margin-left: 1.2rem;
}
#addpaths .footer p:nth-child(2) {
  margin: auto;
  width: 94%;
  height: 1.6rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
}
#addpaths .footer p:nth-child(2) span {
  display: block;
  font-size: 0.28rem;
  line-height: 0.5rem;
}
#addpaths .footer p:nth-child(3) {
  padding: 0.5rem 0 0.2rem;
}
#addpaths .footer p:nth-child(3) button {
  width: 100%;
  height: 1rem;
  outline: none;
  border-color: transparent;
  font-size: 0.3rem;
  border-radius: 10px;
  border-left: 1px solid #cecece;
  border-right: 1px solid #cecece;
}
#addpaths .footer p:nth-child(3) button:nth-child(1) {
  background-color: #fa5e46;
  color: #fff;
}
</style>